<template>
	<div class="section-select">
		<div class="section-select-canel"></div>
		<div class="section-select-box">
			<div class="section-select-title">请选择区间</div>
			<section >
				<div class="section-select-min" v-move="{sectionSelect,sectionLeft}">
					<span>{{watchMin}}</span>
				</div>
				<div class="section-select-max" v-move="{sectionSelect,sectionRight}">
					<span>{{watchMax}}</span>
				</div>
				<div class="after" ref = "after"></div>
			</section>
			<div class="section-select-submit">
				<span @click="submit">确定</span>
				<span class="on" @click = "cancel">取消</span>
			</div>
		</div>
	</div>
</template>

<script>
	
	export default{
		data(){
			return{
				sectionSelect:{},
				sectionClass:'',
				sectionLeft:'left',
				sectionRight:'right',
				params:{
					max:80,
					min:0
				},
				watchMin:0,
				watchMax:80
			}
		},
		methods:{
			submit(){
				this.$emit('sectionChangeFn',{min:this.watchMin,max:this.watchMax})
			},
			cancel(){
				this.$emit('sectionChangeFn')
			}
		},
		computed:{
			after(){
				return this.$refs.after
			}
		},
		watch:{
			'watchMin':function(){
				this.after.style.borderLeft = `${this.watchMin/80*(this.after.parentElement.clientWidth-23)}px solid #aaa`
			},
			'watchMax':function(){
				this.after.style.borderRight = `${(80-this.watchMax)/80*(this.after.parentElement.clientWidth-23)}px solid #aaa`
			}
		},
		created(){
			
			
			this.sectionSelect = this
			this.sectionClass = class sectionMove {
				constructor(el,_this,_float){
					this.startX = 0
					this.moveX = 0
					this.endX = 0
					this.el = el
					this.isTrue = false
					this._float = _float
					this._this = _this
					this.parent = this.el.parentElement
					this.clientWidth = this.parent.clientWidth-23
					this.el.addEvent = this.el.addEventListener?this.el.addEventListener:this.el.attachEvent
					this.paramsMaxMin = (this._this.params.max-this._this.params.min)/(this.clientWidth-23)
					this.Init()
				}
				Init(){
					this.Touch()
				}
				Touch(){
					this.el.addEvent('touchstart', (event) => {
						let e = event.targetTouches[0]
						this.startX = e.pageX
						this.isTrue = true
					})
					this.el.addEvent('touchmove', (event) => {
						if(this.isTrue) {
							let e = event.targetTouches[0]
							if(this._float == 'left'){
								let toRight = parseInt(this.parent.children[1].style.right?this.parent.children[1].style.right:0)
								this.moveX = e.pageX-this.startX+this.endX
								this.moveX = this.moveX>=0?this.moveX:0
								this.moveX = this.moveX<=this.clientWidth-toRight-23?this.moveX:this.clientWidth-toRight-23
								event.target.style.left = `${this.moveX}px`
								this._this.watchMin = parseInt((this.moveX)*this.paramsMaxMin)
							}else if(this._float == 'right'){
								this.moveX = this.startX-e.pageX+this.endX
								let toLeft = parseInt(this.parent.children[0].style.left?this.parent.children[0].style.left:0)
								this.moveX = this.moveX>=0?this.moveX:0
								this.moveX = this.moveX<=this.clientWidth-toLeft-23?this.moveX:this.clientWidth-toLeft-23
								event.target.style.right = `${this.moveX}px`
								this._this.watchMax = parseInt((this.clientWidth-this.moveX-23)*this.paramsMaxMin)
							}
						}
					})
					this.el.addEventListener('touchend', (event) => {
						this.isTrue = false
						this.endX = this.moveX
					})
				}
			}
		},
		directives:{
			move:{
				inserted(el,binding){
					let _this = binding.value.sectionSelect
					let _float
				
					if(binding.value.sectionLeft){
						_float = binding.value.sectionLeft
					}
					if(binding.value.sectionRight){
						_float = binding.value.sectionRight
					}
					new _this.sectionClass(el,_this,_float)
				}
			}
		}
	}
</script>

<style scoped>
	.section-select{ position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%;}
	.section-select-canel{ position: absolute; z-index: -1; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,.4);}
	.section-select-box{position: absolute; bottom: 0; background: #fff; width: 100%; padding: 15px;}
	.section-select-title{ font-size: 16px; color: #FF680F; text-align: center;}
	.section-select section{ position: relative; height: 50px; margin: 10px 0;}
	.section-select section .after{ border:0 solid #333; content: ""; display: block; width: 100%; height: 4px; position: absolute; background: #FF680F; bottom:10px}
	.section-select-min {border-radius: 50%; border-bottom: 0px; background: #fff; border:3px solid #FF680F; bottom: 0; position: absolute; width: 23px; height: 23px; z-index: 2; left: 0;}
	.section-select-min span{ position: absolute; top: -23px; width:40px; text-align: center; color: #FF680F; left: -11px; font-size: 12px;}
	.section-select-max {border-radius: 50%; border-bottom: 0px; background: #fff; border:3px solid #FF680F; bottom: 0; position: absolute; width: 23px; height: 23px; z-index: 2; right: 0;}
	.section-select-max span{position: absolute; top: -23px; width: 40px; text-align: center; color: #FF680F; left: -11px;  font-size: 12px; }
	.section-select-submit{padding: 30px 0 10px;}
	.section-select-submit:after{content: ""; display: block; clear: both; }
	.section-select-submit span{ width: 48%; float: left;text-align: center; padding: 8px; font-size: 14px; border: 2px solid #FF680F; background: #FF680F; color: #fff;}
	.section-select-submit span.on{ float: right; color: #333; background: #fff;}
</style>